<template>
  <div class="pieChart-container" style="width: 100%; height: 270px">
    <div id="pieChart" style="width: 100%; height: 100%"></div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import * as echarts from "echarts/core";
import {
  TitleComponent,
  TitleComponentOption,
  TooltipComponent,
  TooltipComponentOption,
  VisualMapComponent,
  VisualMapComponentOption,
} from "echarts/components";
import { CanvasRenderer } from "echarts/renderers";
import { PieChart, PieSeriesOption } from "echarts/charts";
import { LabelLayout } from "echarts/features";
// 注册必须的组件
echarts.use([
  TitleComponent,
  TooltipComponent,
  CanvasRenderer,
  PieChart,
  VisualMapComponent,
  LabelLayout,
]);
type EChartsOption = echarts.ComposeOption<
  | TitleComponentOption
  | TooltipComponentOption
  | VisualMapComponentOption
  | PieSeriesOption
>;
@Component({
  name: "pieChart",
})
export default class pieChart extends Vue {
  myChart: any;
  created() {}
  mounted() {
    this.initChart();
    setTimeout(() => {
      this.drawChart();
    }, 1500);
  }
  // 1.绘图准备
  initChart() {
    var chartDom = document.getElementById("pieChart");
    this.myChart = echarts.init(chartDom, "macarons");
    // 数据加载动画
    this.myChart.showLoading();
  }
  // 2 获取数据
  getData() {
    var data: any = [];
    return data;
  }
  // 3.绘制图表
  drawChart() {
    this.myChart.hideLoading();
    var option: EChartsOption;
    option = {
      title: {
        text: "本人文章倾向分析",
        left: "left",
        top: 0,
      },
      tooltip: {
        trigger: "item",
      },
      visualMap: {
        show: false,
        min: 10,
        max: 60,
        inRange: {
          colorLightness: [0, 1],
        },
      },
      series: [
        {
          name: "读者各类文章倾向值",
          type: "pie",
          radius: "55%",
          center: ["50%", "50%"],
          data: [
            { value: 25, name: "Java标签" },
            { value: 30, name: "C#标签" },
            { value: 24, name: "C++标签" },
            { value: 35, name: "sql标签" },
            { value: 43, name: "python标签" },
          ].sort(function (a, b) {
            return a.value - b.value;
          }),
          roseType: "radius",
          label: {
            color: "#2C343C",
          },
          labelLine: {
            lineStyle: {
              color: "#2C343C",
            },
            smooth: 0.2,
            length: 10,
            length2: 20,
          },
          itemStyle: {
            color: "#c23531",
          },
          animationType: "scale",
          animationEasing: "elasticOut",
          animationDelay: function (idx) {
            return Math.random() * 200;
          },
        },
      ],
    };
    // 绘制图表
    option && this.myChart.setOption(option);
  }
}
</script>

<style lang="scss" scoped>
</style>